<template>
  <div class="topics-container topics-hardware">
    <Headbar />
    <HeadMenu />
    <div class="bgs">
      <div v-for="(item, idx) in 10" :class="'bg bg'+idx"></div>
    </div>
    <div class="yh-layout-box">
      <div class="nav">
        <ul>
          <li class="cursor" @click="routeToPath('/activity/topics/hardwares')">>五金工具</li>
          <li class="cursor" @click="routeToPath('/activity/topics/labor')">>劳动保护</li>
        </ul>
      </div>
    </div>
    <div class="hardware-wrap">
      <div class="head-title tcenter">
        <h3>更多优质爆款尽在一呼百应·工业品直卖网</h3>
        <p>活动时间：2019年5月25日-6月25日</p>
      </div>

      <div class="sellwell">
        <div class="sw-01 cursor"  @click="routeToGoods('1131465079747837952')">
          <div class="item-main">
            <div class="item-title">
              三合一复合丝锥
            </div>
            <div class="item-subtitle">
              K-JSK42-00M3
            </div>
            <div class="item-old-price">
              原价: <span>19.8</span>
            </div>
            <div class="item-price">
              <span class="price-text">活动价</span><span class="price-big">￥9</span>.99
            </div>
            <div class="item-btn ">
              <img src="@/assets/images/activity/topics/hardware/sellwell/item-btn.png" alt="">
            </div>
          </div>
        </div>

        <div class="sw-info">
          <div class="sw-02 cursor" @click="routeToGoods('1131485365943730176')">
            <div class="item-main">
              <div class="item-title">
                硬质合金金工用圆锯片
              </div>
              <div class="item-subtitle">
                K-QG11-110T24
              </div>
              <div class="item-old-price">
                原价: <span>75</span>
              </div>
              <div class="item-info">
                <div class="item-btn cursor" >
                  <img src="@/assets/images/activity/topics/hardware/sellwell/item-btn2.png">
                </div>
                <div class="item-price">
                  <span class="price-text">活动价</span><span class="price-big">￥36</span>.99
                </div>
              </div>
            </div>
          </div>
          <div class="sw-03 cursor" @click="routeToGoods('1131475494636683264')">
            <div class="item-main">
              <div class="item-title">
                PH65A重型电镐凿
              </div>
              <div class="item-subtitle">
                K-JGS05-4075
              </div>
              <div class="item-old-price">
                原价: <span>130</span>
              </div>
              <div class="item-info">
                <div class="item-btn cursor">
                  <img src="@/assets/images/activity/topics/hardware/sellwell/item-btn2.png">
                </div>
                <div class="item-price ">
                  <span class="price-text">活动价</span><span class="price-big">￥63</span>.99
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 金工孔加工系列 -->
      <div class="jinkong">
        <div class="jk-01 cursor"  @click="routeToGoods('1131469258742628352')">
          <div class="jk-01-info">
            <div class="jk-old-price">
              原价: <span>6.2</span>
            </div>
            <div class="item-price">
              <span class="price-text">活动价</span><span class="price-big">￥4.99</span>
            </div>
          </div>
        </div>
        <div class="jk-info">
          <div class="jk-02 cursor" @click="routeToGoods('1131483505044291584')">
            <div class="jk-title">
              <h3>高速钢氮化钛螺旋槽丝锥</h3>
              <p>K-JSK17-00M3</p>
            </div>
            <div class="jk-old-price">
              原价: <span>19.8</span>
            </div>
            <div class="item-info">
              <div class="item-btn cursor">
                <img src="@/assets/images/activity/topics/hardware/jinkong/4.png">
              </div>
              <div class="item-price">
                <span class="price-text">活动价</span><span class="price-big">￥12</span>.99
              </div>
            </div>
          </div>
          <div class="jk-03 cursor" @click="routeToGoods('1131477845401468928')">
            <div class="jk-title">
              <h3> 高速钢阶梯钻</h3>
              <p>K-JSK05-0003</p>
            </div>
            <div class="jk-old-price">
              原价: <span>2.3</span>
            </div>
            <div class="item-info">
              <div class="item-btn cursor">
                <img src="@/assets/images/activity/topics/hardware/jinkong/4.png">
              </div>
              <div class="item-price">
                <span class="price-text">活动价</span><span class="price-big">￥1</span>.99
              </div>
            </div>
          </div>
          <div class="jk-04 cursor" @click="routeToGoods('1131481755642036224')">
            <div class="jk-title">
              <h3>高速钢M2镀钛双头钻头</h3>
              <p>K-JSK14-0430</p>
            </div>
            <div class="jk-old-price">
              原价: <span>438</span>
            </div>
            <div class="item-info">
              <div class="item-btn ">
                <img src="@/assets/images/activity/topics/hardware/jinkong/4.png">
              </div>
              <div class="item-price">
                <span class="price-text">活动价</span><span class="price-big">￥285</span>.99
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 切割系列 -->
      <div class="qiege">
        <div class="qg-item qg-item01 cursor" @click="routeToGoods('1131471277838630912')">
          <div class="qg-title">
            <h3>树脂切割片（金属切割）</h3>
            <p>K-QG05-1001</p>
          </div>
          <div class="jk-old-price">
            原价: <span>4.10</span>
          </div>
          <div class="item-info">
            <div class="item-btn">
              采购节：
            </div>
            <div class="item-price">
              <span class="price-text">￥</span><span class="price-big">2.99</span>
            </div>
          </div>
        </div>
        <div class="qg-item qg-item02 cursor" @click="routeToGoods('1131486856469348352')">
          <div class="qg-title">
            <h3>硬质合金木工圆锯片</h3>
            <p>K-QG01-110T40</p>
          </div>
          <div class="jk-old-price">
            原价: <span>25.00</span>
          </div>
          <div class="item-info">
            <div class="item-btn">
              采购节：
            </div>
            <div class="item-price">
              <span class="price-text">￥</span><span class="price-big">16.99</span>
            </div>
          </div>
        </div>
        <div class="qg-item qg-item03 cursor" @click="routeToGoods('1131497453252575232')">
          <div class="qg-title">
            <h3>硬质合金多功能圆锯片</h3>
            <p>K-QG02-184T60</p>
          </div>
          <div class="jk-old-price">
            原价: <span>72.00</span>
          </div>
          <div class="item-info">
            <div class="item-btn">
              采购节：
            </div>
            <div class="item-price">
              <span class="price-text">￥</span><span class="price-big">46.99</span>
            </div>
          </div>
        </div>
        <div class="qg-item qg-item04 cursor" @click="routeToGoods('1131496465510760448')">
          <div class="qg-title">
            <h3>金刚石云石切割片（石材）</h3>
            <p>K-QG04-3110</p>
          </div>
          <div class="jk-old-price">
            原价: <span>19.8</span>
          </div>
          <div class="item-info">
            <div class="item-btn">
              采购节：
            </div>
            <div class="item-price">
              <span class="price-text">￥</span><span class="price-big">12.99</span>
            </div>
          </div>
        </div>
      </div>



      <!-- 石碎系列 -->
      <div class="qiege shisui">
        <div class="qg-item qg-item01 cursor" @click="routeToGoods('1131500887594827776')">
          <div class="qg-title">
            <h3>四坑圆柄电镐凿</h3>
            <p>K-JGS01-0025（尖凿  14×250mm）</p>
          </div>
          <div class="jk-old-price">
            原价: <span>11.2</span>
          </div>
          <div class="item-info">
            <div class="item-btn">
              <img src="@/assets/images/activity/topics/hardware/shisui/btn.png" alt="">
            </div>
            <div class="item-price">
              <span class="price-text">活动价</span><span class="price-big">￥7</span>.99
            </div>
          </div>
        </div>
        <div class="qg-item qg-item02 cursor" @click="routeToGoods('1131504529391550464')">
          <div class="qg-title">
            <h3>四坑方柄电镐凿</h3>
            <p>K-JGS02-2520(平凿  14×250×20mm)</p>
          </div>
          <div class="jk-old-price">
            原价: <span>11.2</span>
          </div>
          <div class="item-info">
            <div class="item-btn">
              <img src="@/assets/images/activity/topics/hardware/shisui/btn.png">
            </div>
            <div class="item-price">
              <span class="price-text">活动价</span><span class="price-big">￥7</span>.99
            </div>
          </div>
        </div>
        <div class="qg-item qg-item03 cursor" @click="routeToGoods('1131505645571342336')">
          <div class="qg-title">
            <h3>五坑圆柄电镐凿</h3>
            <p>K-JGS03-0028(尖凿  18×280mm)</p>
          </div>
          <div class="jk-old-price">
            原价: <span>19.7</span>
          </div>
          <div class="item-info">
            <div class="item-btn">
              <img src="@/assets/images/activity/topics/hardware/shisui/btn.png">
            </div>
            <div class="item-price">
              <span class="price-text">活动价</span><span class="price-big">￥12</span>.99
            </div>
          </div>
        </div>
        <div class="qg-item qg-item04 cursor" @click="routeToGoods('1131507069730488320')">
          <div class="qg-title">
            <h3>长六角柄电镐凿</h3>
            <p>K-JGS04-2822(平凿  17×280×22mm)</p>
          </div>
          <div class="jk-old-price">
            原价: <span>14.6</span>
          </div>
          <div class="item-info">
            <div class="item-btn">
              <img src="@/assets/images/activity/topics/hardware/shisui/btn.png">
            </div>
            <div class="item-price">
              <span class="price-text">活动价</span><span class="price-big">￥9</span>.99
            </div>
          </div>
        </div>
      </div>


      <div class="btn-zhuce" @click="routeToPath('/login/register', 'new')"></div>

      <div class="btn-ruzhu" @click="routeToOut(URL.jumpSeller+'/seller/enter/register?staffId=', 'new')"></div>
    </div>
  </div>
</template>

<script>
import Headbar from '@/components/Layouts/Headbar'
import HeadMenu from '@/components/Layouts/HeadMenu'
// require('@/utils/jweixin-1.3.2');

export default {
  name: 'ActivityHardware',
  components: {
    Headbar,
    HeadMenu,
  },
  data() {
    return {

    }
  },
  created() {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>

.btn-zhuce,.btn-ruzhu{
  width: 338px;
  height: 80px;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
  margin-top: 760px;
}
.btn-ruzhu{
  margin-top: 700px;
}
.topics-container{
    position: relative;
    background: #fff;
}
.nav{
  position: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('../../../assets/images/activity/topics/hardware/nav.png');
  width: 230px;
  height: 450px;
  z-index: 3;
  top: 200px;
  right: 50px;
  ul{
    padding-top: 210px;
    li{
      font-size: 36px;
      cursor: pointer;
      text-align: center;
      color: #fddb9a;
      margin-bottom: 80px;
    }
  }
}
.hardware-wrap{
    position: relative;
    z-index: 2;
    margin: 0 auto;
    width: 1200px;
    .head-title{
      margin-top: 455px;
      color: #fff;
      h3{
        font-size: 32px;
        font-weight: 600;
        text-align: center;
      }
      p{
        text-align: center;
        font-size: 24px;
        letter-spacing: 5px;
      }
    }
    .sellwell{
      margin-top: 240px;
      .sw-01{
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url('../../../assets/images/activity/topics/hardware/sellwell/1.png');
        width: 800px;
        height: 369px;
        margin: 0 auto;
        overflow: hidden;
        .item-main{
          width: 320px;
          margin-left: 70px;
          margin-top: 50px;
          .item-title{
            font-size: 46px;
            color: #040000;
            letter-spacing: -4px;
            margin-bottom: 30px;
            font-weight: 600;
          }
          .item-subtitle{
            color: #040000;
            font-size: 32px;
            margin-bottom: 25px;
          }
          .item-old-price{
            font-size: 30px;
            text-decoration:line-through;
            text-decoration-color: #E71F19;
            margin-bottom: 10px;
            span{
              color: #E71F19;
            }
          }
          .item-price{
            font-size: 30px;
            margin-bottom: 5px;
            color: #E71F19;
            font-weight: 600;
            span.price-big{
              font-size: 58px;
              font-weight: 600;
            }
            span.price-text{
              color: #B13323;
              font-size: 20px;
              font-weight: 500;
            }
          }
        }
      }
      .sw-info{
        width: 810px;
        margin: 0 auto;
        margin-top: 40px;
        overflow: hidden;
      }
      .sw-02,.sw-03{
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        .item-main{
          padding: 0 30px;
          .item-title{
            text-align: center;
            margin-top: 270px;
            font-size: 22px;
            color: #040000;
            margin-bottom: 10px;
            font-weight: 600;
          }
          .item-subtitle{
            text-align: center;
            color: #040000;
            font-size: 18px;
            margin-bottom: 5px;
          }
          .item-old-price{
            font-size: 12px;
            text-align: right;
            text-decoration:line-through;
            text-decoration-color: #E71F19;
            margin-bottom: 10px;
            span{
              color: #E71F19;
            }
          }
          .item-btn{
            float: left;
          }
          .item-price{
            font-size: 12px;
            color: #E71F19;
            float: right;
            font-weight: 600;
            span.price-big{
              font-size: 26px;
              font-weight: 600;
            }
            span.price-text{
              color: #B13323;
              font-size: 20px;
              font-weight: 500;
            }
          }
        }
      }
      .sw-02{
        background-image: url('../../../assets/images/activity/topics/hardware/sellwell/2.png');
        width: 372px;
        height: 414px;
        float: left;
      }
      .sw-03{
        background-image: url('../../../assets/images/activity/topics/hardware/sellwell/3.png');
        width: 372px;
        height: 414px;
        float: left;
        margin-left: 60px;
      }
    }

    .jinkong{
      margin-top: 290px;
      .jk-01{
        height: 500px;
        width: 1020px;
        margin: 0 auto;
        overflow: hidden;
        .jk-01-info{
          margin-top: 388px;
          width: 460px;
          margin-left: 508px;
          .jk-old-price{
            font-size: 32px;
            text-decoration:line-through;
            text-decoration-color: #E71F19;
            margin-bottom: 10px;
            float: left;
            width: 180px;
            span{
              color: #E71F19;
            }
          }
          .item-price{
            font-size: 14px;
            color: #E71F19;
            float: left;
            font-weight: 600;
            margin-top: -30px;
            span.price-big{
              font-size: 61px;
              font-weight: 600;
            }
            span.price-text{
              color: #B13323;
              font-size: 22px;
              font-weight: 500;
            }
          }
        }
      }
      .jk-info{
        margin: 0 auto;
        margin-top: 56px;
        overflow: hidden;
        width: 1066px;
        .jk-02,.jk-03,.jk-04{
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          width: 328px;
          height: 405px;
          float: left;
          margin-left: 40px;
          overflow: hidden;
          .jk-title{
            width: 286px;
            margin: 0 auto;
            h3{
              color: #040000;
              font-size: 26px;
              margin-bottom: 0px;
              margin-top: 28px;
              text-align: center;
            }
            p{
              text-align: center;
              color: #040000;
              font-size: 22px;
              margin-top: 10px;
            }
          }
          .jk-old-price{
            font-size: 18px;
            text-align: right;
            text-decoration:line-through;
            text-decoration-color: #E71F19;
            margin-bottom: 10px;
            margin-right: 20px;
            margin-top: 220px;
            span{
              color: #E71F19;
            }
          }
          .item-info{
            width: 286px;
            margin: 0 auto;
            .item-btn{
              float: left;
            }
            .item-price{
              font-size: 14px;
              color: #E71F19;
              float: right;
              font-weight: 600;
              span.price-big{
                font-size: 26px;
                font-weight: 600;
              }
              span.price-text{
                color: #B13323;
                font-size: 20px;
                font-weight: 500;
              }
            }
          }
        }
        .jk-02{
          background-image: url('../../../assets/images/activity/topics/hardware/jinkong/3.png');
          margin-left: 0;
        }
        .jk-03{
          background-image: url('../../../assets/images/activity/topics/hardware/jinkong/6.png');
        }
        .jk-04{
          background-image: url('../../../assets/images/activity/topics/hardware/jinkong/5.png');
        }
      }
    }


    .qiege{
      overflow: hidden;
      width: 1078px;
      margin: 0 auto;
      margin-top: 244px;
      .qg-item{
        height: 355px;
        width: 254px;
        overflow: hidden;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        float: left;
        margin-left: 20px;
        .qg-title{
          margin-top: 240px;
          text-align: center;
          h3{
            font-size: 20px;
            margin-top: 0;
            margin-bottom: 10px;
          }
          p{
            font-size: 15px;
          }
        }
        .jk-old-price{
          margin-left: 40px;
          font-size: 14px;
          text-decoration:line-through;
          text-decoration-color: #E71F19;
          span{
            color: #E71F19;
          }
        }
        .item-btn{
          float: left;
          margin-left: 40px;
        }
        .item-price{
          font-size: 14px;
          color: #E71F19;
          float: left;
          font-weight: 600;
          margin-top: -10px;
          margin-left: 40px;
          span.price-big{
            font-size: 26px;
            font-weight: 600;
          }
          span.price-text{
            color: #666;
            font-size: 12px;
            font-weight: 500;
          }
        }
      }
      .qg-item01{
        background-image: url('../../../assets/images/activity/topics/hardware/qiege/1.png');
        margin-left: 0;
      }
      .qg-item02{
        background-image: url('../../../assets/images/activity/topics/hardware/qiege/2.png');
      }
      .qg-item03{
        background-image: url('../../../assets/images/activity/topics/hardware/qiege/3.png');
      }
      .qg-item04{
        background-image: url('../../../assets/images/activity/topics/hardware/qiege/4.png');
      }
    }

    .shisui{
      margin-top: 330px;
      width: 1108px;
      .qg-item{
        width: 264px;
        height: 330px;
        margin-left: 17px;

        .qg-title{
          margin-top: 28px;
          h3{
            margin-bottom: 4px;
          }
          p{
            font-size: 10px;
            margin-top: 8px;
            color: #000;
          }
        }
        .jk-old-price{
          margin-top: 190px;
          margin-left: 20px;
          margin-bottom: 4px;
        }
        .item-btn{
          margin-left: 20px;
        }
        .item-price{
          margin-right: 20px;
          float: right;
          margin-left: 0;
        }
      }
      .qg-item01{
        background-image: url('../../../assets/images/activity/topics/hardware/shisui/1.png');
        margin-left: 0;
      }
      .qg-item02{
        background-image: url('../../../assets/images/activity/topics/hardware/shisui/2.png');
      }
      .qg-item03{
        background-image: url('../../../assets/images/activity/topics/hardware/shisui/3.png');
      }
      .qg-item04{
        background-image: url('../../../assets/images/activity/topics/hardware/shisui/4.png');
      }
    }
}
.bgs{
    overflow: hidden;
    min-width: 1200px;
    position: absolute;
    left: 0;
    z-index: 1;
    height: 6280px;
    width: 100%;
    text-align: center;
    div.bg{
      width: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .bg0{
        background-image: url('../../../assets/images/activity/topics/hardware/bg/1.png');
        height: 613px;
    }
    .bg1{
        background-image: url('../../../assets/images/activity/topics/hardware/bg/2.png');
        height: 585px;
    }
    .bg2{
        background-image: url('../../../assets/images/activity/topics/hardware/bg/3.png');
        height: 505px;
    }
    .bg3{
        background-image: url('../../../assets/images/activity/topics/hardware/bg/4.png');
        height: 714px;
    }
    .bg4{
        background-image: url('../../../assets/images/activity/topics/hardware/bg/5.png');
        height: 1117px;
    }
    .bg5{
        background-image: url('../../../assets/images/activity/topics/hardware/bg/6.png');
        height: 746px;
    }
    .bg6{
        background-image: url('../../../assets/images/activity/topics/hardware/bg/7.png');
        height: 745px;
    }
    .bg7{
        background-image: url('../../../assets/images/activity/topics/hardware/bg/8.png');
        height: 740px;
    }
    .bg8{
        background-image: url('../../../assets/images/activity/topics/hardware/bg/9.png');
        height: 430px;
    }
    .bg9{
        background-image: url('../../../assets/images/activity/topics/hardware/bg/10.png');
        height: 86px;
    }
  }

</style>
